AMPLIFY SNS WORKSHOP
public.icon
前提条件
v16.0.0
7.10.0
$ java -version
good.icon確認
$ npm install -g @aws-amplify/cli@4.41.2
ちょっと時間がかかる
/icons/hr.icon
はじめに
本ワークショップのゴール
/emoji/aws.iconLambdaを使ってサーバーサイドで複雑なビジネスロジックを実装します /icons/hr.icon
あなたの友人のユキは、ユーザーが最大140字程度の短いテキストを投稿して繋がるソーシャルメディアアプリ「Boyaki」を思いつきました あるある起業家じゃんwtkgshn.icon
りあえずものを見せてくれ！と投資家に言われたユキは、友人のあなたに3日でMVP(Minimum Viable Product)を作るよう依頼します。
おわおわりtkgshn.icon*5
本セクションで実装するもの
https://gyazo.com/47ac5cc3da1cf12fec769c798bec353d
https://gyazo.com/c78feb31f1eca87e6896f3f4ce878f94
Bootstrap
まずは作業するディレクトリを作る
$ mkdir amplify-sns-workshop
$ npx create-react-app boyaki
$ cd boyaki
$ amplify init
色々質問されるので答える
Enter a name for the project boyaki
Enter a name for the environment production
Choose your default editor: Vim (via Terminal, Mac OS only)
Choose the type of app that you’re building javascript
What javascript framework are you using react
Source Directory Path: src
Distribution Directory Path: build
Build Command: npm run-script build
Start Command: npm run-script start
Do you want to use an AWS profile? Yes
Please choose the profile you want to use amplify-handson
環境のテスト
$ npm start
https://gyazo.com/f78d32f505fa2eaf789430bb02b63a7f
この時にサーバーを起動したターミナルをそのままにしなければいけない
cmd + n 新しいウィンドウを表示
cmd + w ウィンドウを削除
cmd + d ウィンドウを縦に分割tkgshn.icon*3
cmd + shift + d ウィンドウを横に分割
縦に分割した後にnodeのパスを通す
これ毎回必要なのかしら？
認証機能の追加
認証機能の追加
$ amplify add auth
確認
$ amplify status
https://gyazo.com/e7b9746fd790b662a4a8b9612d0fee2f
良さげtkgshn.icon
クラウドへ反映
$ amplify push
今までのadd authはローカルだったってことかtkgshn.icon
tips from /emoji/aws.icon
ampfliy pushコマンドは、amplify addコマンドなどによる変更をクラウドのリソースへ反映するコマンドです 逆に言えばamplify pushコマンドを実行しない限り、クラウドのリソースへ反映されません(詳細)。
なんかめっちゃ時間かかるけど、OK
認証機能のフロントエンドへの実装
今までは裏側にauthを作ってたけど、実際に動くようにするためにはフロントに追加する必要がある $ npm install --save aws-amplify@3.3.14 @aws-amplify/ui-react@0.2.34
Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npmのエラーかなんかで怒られてるけど、--legacy-peer-depsをつけて無理やりGO
npmじゃなくてyarnでインストールすればいい？tkgshn.icon
ちょっと次のステップに行く前に階層構造を整理するためにtreeが使いたいので寄り道 amplify-sns-workshop/boyaki/src/app.js のファイルの中身を置き換える
vimの:%dで全削除からの貼り付けが便利tkgshn.icon 動作確認
localhost 200を見に行くとこけてる
Failed to compile
./node_modules/@aws-sdk/client-translate/dist/es/commands/CreateParallelDataCommand.jsAttempted import error: 'deserializeAws_json1_1CreateParallelDataCommand' is not exported from '../protocols/Aws_json1_1'.
This error occurred during the build time and cannot be dismissed.
npm由来なのかな
$ yarn add aws-amplify@3.3.14 @aws-amplify/ui-react@0.2.34
これでもうまくいかない
何が入ってるか確認
├── @aws-amplify/ui-react@0.2.34
├── @testing-library/jest-dom@5.12.0
├── @testing-library/react@11.2.6
├── @testing-library/user-event@12.8.3
├── aws-amplify@3.3.14
├── react-dom@17.0.2
├── react-scripts@4.0.3
├── react@17.0.2
└── web-vitals@1.1.1
やり直したらいけた
https://gyazo.com/2098270b2ef84fb7b497afac5e9020eb
https://gyazo.com/d649aefe451e8a865d4be40ab244be2f
POST機能
まずは本番にpushする前にmockで確認する
$ amplify mock api
https://gyazo.com/979f05fc41729a1cd34a2932dae5a4d3
いい感じに動いてそう！OK！
mockを停止させる
必要なクエリを@keyに落とし込む
https://gyazo.com/82f8d186d94e00196cdccb669bd6ac29
https://gyazo.com/24f81dcacff6f54a19868b9b5f110369
/icons/hr.icon
ウェブサイトホスティング
$ amplify add hosting
$ amplify publish
ちょっと待てば公開される
/icons/hr.icon
Follow/TimeLine機能の実装
1619882252
個別のタイムラインを出し分ける
GraphQL APIの認証方法にIAMを追加
$ amplify update api
ぽちぽち選んでいく
Please select from one of the below mentioned services: GraphQL
Select from the options below: Update auth settings
Choose the default authorization type for the API Amazon Cognito User Pool
Configure additional auth types? Yes
Choose the additional authorization types you want to configure for the API IAM
なんかエラー出る
Failed to start API Mock endpoint InvalidDirectiveError: @auth directive with 'iam' provider found, but the project has no IAM authentication provider configured.
Choose the additional authorization types...の項目は複数選択式となります。 IAMまでカーソルで移動後、__スペースキー__を押すことでIAMが選択でき、Enterキーを押すことで選択が確定し次の項目に移ります。 スペースキーで選択ができていることを確認してください。
このスペースキーで選択をせずに、Enterしまくったらこのエラーが出たtkgshn.icon
ちゃんと読みましょうtkgshn.icon*2
うち一つのid、timestampをメモしておきます。(Postが一つも存在しない場合は、3.2.の手順に従いPostを新規に作成します)
めもんぬtkgshn.icon
"id": "46c46e8b-3963-4e02-a87b-da5c5b1249f7",
"owner": "user1",
"timestamp": 1619871209
作成したTimelineが表示されない場合、Update Authを押してUsernameを確認し、listTimelinesのuserId引数に渡している値と一致しているか確認してください。TimelineはOwnerにしかreadが許されていないため、他のユーザーのクレデンシャルでQueryを発行しても取得ができません。
このアドバイスが良かった
TIMELINE機能: @FUNCTION
Mutation = 突然変異tkgshn.icon*4
全文検索に入る前になぜか動かなくなった
コードの書き換えをしていく
PostsBySpecifiedUser.js
schema.graphql
index.js
フロント側
Timeline.js
App.js
Sidebar.js
App.jsが調子悪いらしい
もう一回上書き
./src/index.js
Attempted import error: './App' does not contain a default export (imported as 'App').
デプロイ完了！
https://gyazo.com/96bc0565be93c39cdd0a99bc8789dd71
複数アカウントからの書き込みや、mypageの出しわけなどもできてる
/icons/hr.icon
全文検索機能
code:通常のコマンドの後に以下をつける .md
&& echo -e 'deployed.\a'
https://gyazo.com/f901922dfaebd84156cdcad6688ad75e
検索機能自体はうまく動くことを確認
検索バーのUIを作る
Search.jsを新規追加
App.jsを更新
振り分けの問題
Sidebar.jsを更新
$ amplify publish && echo -e 'deployed.\a'
長くなりそうなので通知
OKtkgshn.icon*3
/icons/hr.icon
複数メンバーでの開発
amplifyの環境と、GitHubのブランチを連携させてバックエンドの紐付けを行う これで簡単にCI/CD環境が構築できるようになる！tkgshn.icon*2